<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色扮演API测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fafafa;
        }
        .test-section h3 {
            color: #2c3e50;
            margin-top: 0;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        button:hover {
            background-color: #2980b9;
        }
        button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
        }
        .success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .loading {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }
        .character-select {
            margin: 10px 0;
        }
        .character-select select {
            padding: 5px;
            margin: 0 10px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }
        .input-group {
            margin: 10px 0;
        }
        .input-group input, .input-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 3px;
            margin-top: 5px;
        }
        .input-group textarea {
            height: 80px;
            resize: vertical;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎭 角色扮演API测试</h1>
            <p>测试后端角色扮演功能是否正常工作</p>
        </div>

        <!-- 角色自我介绍测试 -->
        <div class="test-section">
            <h3>🎭 角色自我介绍测试</h3>
            <div class="character-select">
                <label>选择角色：</label>
                <select id="intro-character-select">
                    <option value="苏格拉底">苏格拉底</option>
                    <option value="莎士比亚">莎士比亚</option>
                    <option value="爱因斯坦">爱因斯坦</option>
                    <option value="江户川柯南">江户川柯南</option>
                </select>
            </div>
            <button onclick="testCharacterIntro()">测试角色自我介绍</button>
            <div id="intro-result" class="result" style="display: none;"></div>
        </div>

        <!-- 角色对话测试 -->
        <div class="test-section">
            <h3>💬 角色对话测试</h3>
            <div class="character-select">
                <label>选择角色：</label>
                <select id="chat-character-select">
                    <option value="苏格拉底">苏格拉底</option>
                    <option value="莎士比亚">莎士比亚</option>
                    <option value="爱因斯坦">爱因斯坦</option>
                    <option value="江户川柯南">江户川柯南</option>
                </select>
            </div>
            <div class="input-group">
                <label>输入消息：</label>
                <textarea id="chat-message" placeholder="请输入要发送给角色的消息...">你好，请介绍一下你自己</textarea>
            </div>
            <button onclick="testCharacterChat()">测试角色对话</button>
            <div id="chat-result" class="result" style="display: none;"></div>
        </div>

        <!-- 批量测试 -->
        <div class="test-section">
            <h3>🔄 批量测试</h3>
            <button onclick="testAllCharacters()">测试所有角色</button>
            <div id="batch-result" class="result" style="display: none;"></div>
        </div>
    </div>

    <script>
        // 显示结果
        function showResult(elementId, content, type = 'success') {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.className = `result ${type}`;
            element.textContent = content;
        }

        // 显示加载状态
        function showLoading(elementId) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.className = 'result loading';
            element.textContent = '正在请求中...';
        }

        // 测试角色自我介绍
        async function testCharacterIntro() {
            const character = document.getElementById('intro-character-select').value;
            
            showLoading('intro-result');
            
            try {
                const response = await fetch('http://localhost:8080/api/test/roleplay', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        character: character,
                        prompt: '请以' + character + '的身份主动向我打招呼，介绍你自己，并邀请我与你对话。'
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const data = await response.json();
                
                if (data.success && data.data) {
                    const result = `✅ ${character} 自我介绍成功!\n\n🤖 ${character} 回复:\n${data.data}`;
                    showResult('intro-result', result, 'success');
                } else {
                    showResult('intro-result', `❌ ${character} 自我介绍失败: ${data.message || '未知错误'}`, 'error');
                }
            } catch (error) {
                showResult('intro-result', `❌ ${character} 自我介绍失败: ${error.message}`, 'error');
            }
        }

        // 测试角色对话
        async function testCharacterChat() {
            const character = document.getElementById('chat-character-select').value;
            const message = document.getElementById('chat-message').value;
            
            showLoading('chat-result');
            
            try {
                const response = await fetch('http://localhost:8080/api/test/roleplay', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        character: character,
                        prompt: message
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const data = await response.json();
                
                if (data.success && data.data) {
                    const result = `✅ ${character} 对话测试成功!\n\n👤 用户: ${message}\n🤖 ${character}: ${data.data}`;
                    showResult('chat-result', result, 'success');
                } else {
                    showResult('chat-result', `❌ ${character} 对话测试失败: ${data.message || '未知错误'}`, 'error');
                }
            } catch (error) {
                showResult('chat-result', `❌ ${character} 对话测试失败: ${error.message}`, 'error');
            }
        }

        // 测试所有角色
        async function testAllCharacters() {
            const characters = ['苏格拉底', '莎士比亚', '爱因斯坦', '江户川柯南'];
            
            showLoading('batch-result');
            
            let results = [];
            let successCount = 0;
            
            for (const character of characters) {
                try {
                    const response = await fetch('http://localhost:8080/api/test/roleplay', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            character: character,
                            prompt: '请简单介绍一下你自己'
                        })
                    });

                    if (response.ok) {
                        const data = await response.json();
                        if (data.success && data.data) {
                            results.push(`✅ ${character}: 测试成功`);
                            successCount++;
                        } else {
                            results.push(`❌ ${character}: ${data.message || '未知错误'}`);
                        }
                    } else {
                        results.push(`❌ ${character}: HTTP ${response.status}`);
                    }
                } catch (error) {
                    results.push(`❌ ${character}: ${error.message}`);
                }
                
                // 添加延迟避免请求过快
                await new Promise(resolve => setTimeout(resolve, 1000));
            }
            
            const result = `📊 批量测试结果: ${successCount}/${characters.length} 成功\n\n${results.join('\n')}`;
            showResult('batch-result', result, successCount === characters.length ? 'success' : 'error');
        }
    </script>
</body>
</html>
